<template>
  <div class="user-edit">
    <!-- Modal -->
    <!-- :styles="{top: '50%',transform: 'translateY(-50%)','border-radius': '15px',height: '80%','overflow-y': 'auto'}" -->
    <Modal
      :title="title"
      v-model="visible"
      width="700"
      :styles="{ top: '20px', 'border-radius': '15px' }"
      :mask-closable="type == '0'"
      scrollable="true"
      transfer
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <Form ref="form" :model="form" :rules="ruleValidate">
          <Row :gutter="32">
            <Col span="24">
              <div class="add-section">
                <span class="label">预约地点：</span>
                <FormItem prop="productId">
                  <Select
                    v-model="form.productId"
                    transfer
                    placeholder="请选择"
                    style="width: 200px"
                  >
                    <Option
                      v-for="item in scSiteList"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.title }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <div class="add-section">
                <span class="label">可用时间段：</span>
                <div class="add-list">
                  <div
                    class="add-content"
                    v-for="(item, index) in form.timeList"
                    :key="item.id"
                  >
                    <div class="form-item">
                      <FormItem
                        :prop="'timeList.' + index + '.startDateStr'"
                        :rules="{
                          required: true,
                          message: '请输入开始时间',
                          trigger: 'blur',
                          type:'object'
                        }"
                      >
                        <!-- <Input
                          v-model="item.startDateStr"
                          placeholder="请输入开始时间（例：12:30）"
                        /> -->
                        <DatePicker
                          v-model="item.startDateStr"
                          type="datetime"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择开始时间"
                          style="width: 200px"
                        ></DatePicker>
                      </FormItem>
                      <FormItem
                        :prop="'timeList.' + index + '.endDateStr'"
                        :rules="{
                          required: true,
                          message: '请输入结束时间',
                          trigger: 'blur',
                          type:'object'
                        }"
                      >
                        <!-- <Input
                          v-model="item.endDateStr"
                          placeholder="请输入结束时间（例：13:35）"
                        /> -->
                        <DatePicker
                          v-model="item.endDateStr"
                          type="datetime"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束时间"
                          style="width: 200px"
                        ></DatePicker>
                      </FormItem>
                    </div>
                    <Button
                      type="primary"
                      v-if="index == 0"
                      @click="addTimeList"
                      ><Icon type="md-add" size="24"
                    /></Button>
                    <Button type="primary" v-else @click="subTimeList(index)"
                      ><Icon type="ios-trash-outline" size="24"
                    /></Button>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          size="large"
          :loading="submitLoading"
          @click="submit"
          >保存</Button
        >
        <Button size="large" @click="visible = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  scMeetRoomSetAdd,
  scSiteAdd,
  getScSiteAll,
  scOrderAdjust,
} from "@/api/index";
import {} from "@/libs/validate";
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
import SetPassword from "@/views/my-components/xboot/set-password";
import dict from "@/views/my-components/xboot/dict";
import { set } from "date-fns";
export default {
  name: "user",
  components: {
    departmentTreeChoose,
    uploadPicInput,
    SetPassword,
    dict,
    uploadPicThumb,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },

    formSetData: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        timeList: [{ id: "1", startDateStr: "", endDateStr: "" }],
      },
      ruleValidate: {
        description: [
          { required: true, message: "请输入场地介绍", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入租金", trigger: "blur" }],
        startRentHour: [
          { required: true, message: "请输入起租时长", trigger: "blur" },
        ],
      },
      scSiteList: [],
    };
  },
  methods: {
    init() {
      this.getScSiteAllData();
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let dateList = {};
          this.form.timeList.forEach((item, index) => {
            dateList["cartNumParams[" + index + "].startDateStr"] = this.format(
              item.startDateStr,
              "yyyy-MM-dd HH:mm:ss"
            );
            dateList["cartNumParams[" + index + "].productId"] = this.form.productId
            dateList["cartNumParams[" + index + "].endDateStr"] = this.format(
              item.endDateStr,
              "yyyy-MM-dd HH:mm:ss"
            );
          });
          let obj = {
            ...this.form,
            ...dateList,
            orderId: this.data.id
          };
          scOrderAdjust(obj).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.visible = false;
              this.$emit("on-submit", true);
            }
          });
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      this.$refs.form.resetFields();
      this.title = "添加场地";
      // 清空数据
      console.log(this.data);
      if (this.data.orderDetails.length > 0) {
        this.form.productId = this.data.orderDetails[0].productId;
        let timeList = [];
        this.data.orderDetails.forEach((item) => {
          timeList.push({
            id: item.id,
            startDateStr: item.startDate,
            endDateStr: item.endDate,
          });
        });
        this.form.timeList = 
          timeList
        ;
        // this.form = {timeList: [{id:'1', validStartDate: '', validEndDate: ''}],type: '1'}
        console.log(this.form);
      }
      this.maxHeight =
        Number(document.documentElement.clientHeight - 230) + "px";
      this.visible = value;
    },
    addTimeList() {
      this.form.timeList.push({ id: Date.now() });
    },
    subTimeList(index) {
      this.form.timeList.splice(index, 1);
    },
    getScSiteAllData() {
      getScSiteAll().then((res) => {
        if (res.success) {
          this.scSiteList = res.result;
        }
      });
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
.radio-group {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.add-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .label {
    width: 100px;
    margin-top: 6px;
    text-align: right;
  }
  .ivu-form-item,
  .add-list {
    flex: 1;
  }
}
.add-content {
  display: flex;
  // flex: 1;
  .form-item {
    display: flex;
    flex: 1;
    justify-content: space-between;
    .ivu-form-item {
      // width: 48%;
      margin-right: 20px;
    }
  }
  .ivu-form-item {
    flex: 1;
  }
  .ivu-btn {
    margin-right: 0;
  }
}
.drawer-content {
  overflow: visible;
}
</style>

